<template>
  <div  class="bar">
    <div class="bar_left">
      <el-button-group>
        <el-button v-for="(button,k) in buttons" :key="k" type="primary" @click="event(button.event)">{{ button.name }}</el-button>
        <el-button v-if="excelStatus" type="primary" @click="clickExcel">
          导入excel
          <excel :formatter="formatter" @changeFile="changeFile" id="excel">
          </excel>
        </el-button>
      </el-button-group>
    </div>
    <div class="bar_right" v-if="selectRight">
      <div>
        <el-select v-model="select" slot="prepend" placeholder="请选择" @change="change">
          <template v-for="(condition,k) in conditions">
            <el-option v-if="condition.show"  :key="k"  :label="condition.label" :value="condition.value"></el-option>
          </template>
        </el-select>
      </div>
      <div class="exhibition" v-if="type === ''">
        <div class="tags">
          <el-tag
            v-for="tag in tags"
            :key="tag"
            closable
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
        </div>
      </div>
      <el-input v-model="input" v-if="type == 'input'" placeholder="按回车即可进行搜索" ref="input">
        <template slot="append">
          <el-button @click="inputChange">确定</el-button>
        </template>
      </el-input>
      <el-select v-model="option" v-if="type == 'select'" placeholder="请选择" @change="optionChange" ref="selecte">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        ref="picker"
        v-if="type == 'picker'"
        v-model="picker"
        type="daterange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        @change="pickerChange">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
  import excel from './../../common/Excel.vue'

  export default {
    name: 'bar',
    data() {
      return {
        params: {},
        tags: [],
        input: '',
        select: '',
        option: '',
        options: [],
        type: '',
        picker: []
      }
    },
    props: {
      conditions: {
        type: Array,
        default: function () {
          return []
        }
      },
      buttons: {
        type: Array,
        default: function () {
          return []
        }
      },
      excelStatus: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      formatter: {
        type: Array,
        default: function () {
          return []
        }
      },
      api: {
        type: String,
        default: function () {
          return ''
        }
      },
      selectRight: {
        type: Boolean,
        default: function () {
          return true
        }
      }
    },
    mounted: function () {
      let self = this;
      document.onkeydown = function (ev) {
        if (ev.keyCode == 13) {
          self.inputChange();
        }
      }
    },
    created() {
      this.changeTags(this.$route.query)
    },
    methods: {
      clickExcel() {
        let excel = document.getElementById('excel');
        excel.click()
      },
      changeFile(data) {
        this.$store.dispatch(this.api, data.data).then(y => {
          if(!y.success) {
            this.$notify({
              title: '标题',
              type: 'success',
              message: '已导入'
            });
            this.$parent.init()
          }
        })
      },
      changeTags(params) {
        let queryStr = JSON.stringify(params)
        this.params = Object.assign({}, JSON.parse(queryStr))
        let self = this
        self.tags = []

        Object.keys(params).map(v => {
          if(v !== 'page' && v !== 'size') {
            this.conditions.map(y => {
              if(v === y.value && y.type !== 'select') {
                self.tags.push(y.label + ':' + params[v])
                self.params[v] = params[v]
              }else if(v === y.value && y.type === 'select') {
                y.options.map(n => {
                  if(n.value === params[v]) {
                    self.tags.push(y.label + ':' + n.label)
                  }
                })
              }
            })
          }
        })
      },
      handleClose(tag) {
        let arr = tag.split(':')
        let self = this
        this.conditions.map(y => {
          if(arr[0] === y.label) {
            delete self.params[y.value]
          }
        })
        this.tags.splice(this.tags.indexOf(tag), 1);
        this.search()
      },
      event(e){
        e(this)
      },
      change(v) {
        this.conditions.map(y => {
          if(v === y.value) {
            this.type = y.type
            this.options = y.options
          }
        })
      },
      optionChange() {
        this.params[this.select] = this.option
        this.type = ''
        this.select = ''
        this.option = ''
        this.search()
      },
      inputChange() {
        this.params[this.select] = this.input
        this.type = ''
        this.input = ''
        this.select = ''
        this.search()
      },
      pickerChange(v) {
        this.params.startAt = v[0]
        this.params.endAt = v[1]
        this.type = ''
        this.select = ''
        this.picker = []
        this.search()
      },
      search() {
        this.changeTags(this.params)
        this.$router.push({query: this.params})
      }
    },
    watch: {
      '$route'(n, v) {
        this.changeTags(n.query)
      }
    }
  }
</script>

<style scope>
.bar {
  height: 50px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bar_right {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.bar_right .el-select .el-input {
  width: 130px;
}
.exhibition el-select .el-input {
  width: 220px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.exhibition {
  position: relative;
  border: 1px solid #dcdfe6;
  width: 220px;
  height: 38px;
  line-height: 38px;
  border-radius: 4px;
}
.tags {
  height: 40px;
  overflow: hidden;
}
.tags:hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0px;
  height: auto;
  z-index: 1000;
  background-color: #ededed;
  border-radius: 5px;
}
.right_buttons {
  margin-left: 20px;
}
.el-input.el-input-group.el-input-group--append {
  width: 220px;
}
.bar_right>.el-select .el-input.el-input--suffix {
  width: 220px;
}
.bar_right>.el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange{
  width: 220px;
}
</style>
